import React, { useState } from 'react';
import {Button, Divider, Flex, Radio, Table} from 'antd';
import type { TableColumnsType, TableProps } from 'antd';

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}

const columns: TableColumnsType<DataType> = [
    {
        title: 'Name',
        dataIndex: 'name',
        render: (text: string) => <a>{text}</a>,
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];

const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Disabled User',
        age: 99,
        address: 'Sydney No. 1 Lake Park',
    },
];





const App: React.FC = () => {

    const [selectionType, setSelectionType] = useState<"checkbox" | "radio">("checkbox")


    const [loading, setLoading] = useState(false)

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])


    let options = [
        {value:"checkbox",label:"checkbox"},
        {value:"radio",label:"radio"}
    ]

    const rowSelection:TableProps<DataType>["rowSelection"] = {
        // 选择框的默认属性配置
        getCheckboxProps:(record:DataType)=>{
            console.log(record,"record")
            return {
                disabled:record.name==="Disabled User"
            }
        },
        /**
         *
         * @param selectedRowKeys  选中的key
         * @param selectedRows  选中的rows
         * @param info
         */
        onChange:(selectedRowKeys,selectedRows,info)=>{
            console.log(selectedRowKeys,selectedRows,info,"info")
            setSelectedRowKeys(selectedRowKeys)
        },
        selectedRowKeys:selectedRowKeys
    }


    const start = ()=>{
        setLoading(true)

        setTimeout(()=>{
            setSelectedRowKeys([])
            setLoading(false)
        },2000)
    }


    return (
        <div>

            <Flex vertical gap="middle">
                <Flex align="center" gap="middle">
                    <Button type="primary" onClick={start} loading={loading} disabled={!selectedRowKeys.length>0}>reload</Button>
                </Flex>

                <Radio.Group value={selectionType} options={options} onChange={e=>setSelectionType(e.target.value)}></Radio.Group>

                <Table columns={columns} dataSource={data} rowSelection={{type:selectionType,...rowSelection}} />
            </Flex>



        </div>
    );
};

export default App;
